<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="header-content">
				<view class="nav-left" @tap="goBack">
					<image class="back-icon" src="/static/icons/arrow_left.png"></image>
				</view>
				<view class="contact-info">
					<image class="avatar" :src="contact.avatar"></image>
					<view class="info">
						<text class="name">{{ contact.name }}</text>
						<text class="status">{{ contact.online ? '在线' : '离线' }}</text>
					</view>
				</view>
				<view class="nav-right" @tap="showOptions">
					<image class="more-icon" src="/static/icons/more-vertical.png"></image>
				</view>
			</view>
		</view>
		
		<!-- 聊天内容区域 -->
		<scroll-view scroll-y class="chat-content" @scrolltoupper="loadMoreMessages" upper-threshold="50">
			
			<view class="date-divider" v-if="hasMessages">
			
		       <view @tap="toMessage" style="width: 100%; height: 50rpx;background-color: bisque;text-align: center;">有最新联系记录</view>
	
			</view>
		</scroll-view>
		
		
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				contact: {
					id: '001',
					name: '聊天记录',
					avatar: '/static/images/a.png',
					online: true
				},
				messages: []
					
		
			}
		},
		computed: {
		        hasMessages() {
		                const result = this.messages && Object.keys(this.messages).length > 0;
		                  console.log("计算属性hasMessages:", result);
		                  return result;
		        }
		    },
			onShow() {
			  uni.getStorage({
			    key: "message",
			    success: (res) => {
			      console.log("获得值：", res.data);
			      // 更新页面数据
			      this.messages = res.data ;
			    },
			    fail: (err) => {
			      console.log("出错！", err);
			    }
			  });
			},
		onLoad(options) {
			
		},
		
		onUnload() {
		    
		  }
		,
		methods: {
			 
			   
			
			// 加载消息历史
			loadMessages(contactId) {
				// 实际项目中应从API获取消息历史
				console.log('Loading messages for contact ID:', contactId);
				// 此处使用模拟数据，实际应用中可替换为API调用
			},
			
		
			// 返回上一页
			goBack() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			
			
			// 发送消息
			 toMessage() {
				 console.log("huoqu:",this.messages[0].touserid)
				 uni.navigateTo({
				 	url: `/pages/chat/chat-detail?touserid=${this.messages[0].touserid}`
				 })
			 },
			
		
			// 滚动到底部
			
			
			// 输入框获得焦点
			onInputFocus() {
				this.isInputFocused = true;
				this.showToolsPanel = false;
				
				// 滚动到底部
				this.$nextTick(() => {
					this.scrollToBottom();
				});
			},
			
			// 输入框失去焦点
			onInputBlur() {
				this.isInputFocused = false;
			},
			
			// 显示/隐藏工具面板
			showTools() {
				this.showToolsPanel = !this.showToolsPanel;
				
				if (this.showToolsPanel) {
					// 隐藏键盘
					uni.hideKeyboard();
				}
			},
			
			
			
		
			
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #1d4ed8;
	}
	
	.header {
		background-color: #1d4ed8;
		padding: 20rpx 30rpx;
	}
	
	.header-content {
		display: flex;
		align-items: center;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.contact-info {
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		margin-right: 15rpx;
	}
	
	.info {
		display: flex;
		flex-direction: column;
	}
	
	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #fff;
	}
	
	.status {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.nav-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.more-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.chat-content {
		flex: 1;
		padding: 30rpx;
	
		max-width: 650rpx;
		background-color: #f5f7fa;
	}
	

</style> 